<template>
  <div>
    <demo-component
      name="基础用法"
      :codeStr="codeStr1">>
      <template v-slot:code>
        <div class="flex">
          <h-button text="默认按钮" @btnClick="onBtnClick" />
          <h-button text="主要按钮" type="primary" @btnClick="onBtnClick" />
          <h-button text="危险按钮" type="danger" @btnClick="onBtnClick" />
          <h-button text="警告按钮" type="warning" @btnClick="onBtnClick" />
        </div>
      </template>
    </demo-component>
    <demo-component
      name="禁用状态"
      :codeStr="codeStr2">>
      <template v-slot:code>
        <div class="flex">
          <h-button text="默认按钮" @btnClick="onBtnClick" disabled/>
          <h-button text="主要按钮" type="primary" @btnClick="onBtnClick" disabled/>
          <h-button text="危险按钮" type="danger" @btnClick="onBtnClick" disabled/>
          <h-button text="警告按钮" type="warning" @btnClick="onBtnClick" disabled/>
        </div>
      </template>
    </demo-component>
  </div>
</template>
<script>
import DemoComponent from './demo-component.vue'
export default {
  data () {
    return {
      codeStr1: `<h-button text="默认按钮" @btnClick="onBtnClick" />
        <h-button text="主要按钮" type="primary" @btnClick="onBtnClick" />
        <h-button text="危险按钮" type="danger" @btnClick="onBtnClick" />
        <h-button text="警告按钮" type="warning" @btnClick="onBtnClick" />`,
      codeStr2: `<h-button text="默认按钮" @btnClick="onBtnClick" disabled/>
        <h-button text="主要按钮" type="primary" @btnClick="onBtnClick" disabled/>
        <h-button text="危险按钮" type="danger" @btnClick="onBtnClick" disabled/>
        <h-button text="警告按钮" type="warning" @btnClick="onBtnClick" disabled/>`
    }
  },
  props: {
  },
  methods: {
    onBtnClick (e) {
      console.log('e>>>', e);
    }
  },
  computed: {
  },
  components: {
    DemoComponent
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>
<style>
</style>
